<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分类列表</title>
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="./assets/bootstrap-validator/bootstrapValidator.min.css">
    <link rel="stylesheet" href="./assets/mui/css/mui.min.css">
    <link rel="stylesheet" href="./assets/css/animate.min.css"/>
    <link rel="stylesheet" href="./assets/mescroll/mescroll.min.css">
    <link rel="stylesheet/less" href="./assets/css/reset.less"/>
    <link rel="stylesheet/less" href="./assets/css/common.less"/>
    <link rel="stylesheet/less" href="./assets/css/ContactAdd.less"/>
    <link rel="stylesheet/less" href="./assets/css/index.less"/>
</head>

<style>
    p {
        color: #fff;
    }
    .contact {
        height: auto;
        padding-bottom: 0;
    }
    .operation {
        display: flex;
        gap: 10px;
    }
</style>
<body>
<!-- 信息录入 -->
<div class="info">
    <h3 class="title wow fadeInUp">分类列表</h3>
    <p class="desc wow fadeInUp" data-wow-delay="200ms">
        分类列表
    </p>
</div>

<form id="editType" class="contact wow fadeInUp" data-wow-delay="300ms">
    <div class="form-group">
        <label for="search">搜索分类名</label>
        <input type="text" class="form-control" id="search" name="search" placeholder="请输入分类名" required/>
        <button class="btn" size="mini" id="btn" type="default">搜索</button>
    </div>
</form>
<div id="cardList" class="contact mescroll wow fadeInUp" data-wow-delay="100ms">
    <div class="list"></div>
</div>

<div class="tabbar" style="background-color: transparent;border-top: unset;padding: 0;">
    <button class="btn btn-primary" onclick="location.href = 'TypeAdd.html'" style="width: 100%;border-radius: unset;">
        新增分类
    </button>
</div>
</body>
<script src="./assets/js/less.min.js"></script>
<script src="./assets/js/jquery.min.js"></script>
<script src="./assets/js/bootstrap.min.js"></script>
<script src="./assets/js/wow.min.js"></script>
<script src="./assets/bootstrap-validator/bootstrapValidator.min.js"></script>
<script src="./assets/mui/js/mui.min.js"></script>
<script src="./assets/axios/axios.min.js"></script>
<script src="./assets/axios/request.js"></script>
<script src="./assets/mescroll/mescroll.min.js"></script>
<script src="./assets/js/cookie.js"></script>
<script src="./assets/js/login.js"></script>

<script>
    new WOW().init();
    let business = cookie.get('business') ? JSON.parse(cookie.get('business')) : {};
    let search = '';

    // 搜索关键字
    $('#btn').click(function (e) {
        e.preventDefault()
        search = $.trim($('#search').val())
        DownCallback()
    })

    const mescroll = new MeScroll('cardList', {
        down: {
            auto: false,
            callback: DownCallback
        },
        up: {
            auto: true,
            isBounce: false,
            callback: UpCallback,
            toTop: {
                duration: 600,
                src: "./assets/images/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
                offset: 100
            }
        }
    })

    async function DownCallback() {
        mescroll.resetUpScroll();
        $('#cardList .list').empty();
    }

    async function UpCallback(page) {
        // 请求参数
        let data = {
            page: page.num,
            limit: page.size,
            businessid: business.id ? business.id : 0,
            search
        };
        let result = await POST({
            url: 'card/type/index',
            params: data
        });
        if (result.code === 0) {
            mescroll.endBySize(0, 0);
        }
        let list = result.data.list ? result.data.list : []
        mescroll.endBySize(list.length, result.data.count);
        fetchList(list)
    }

    function fetchList(list) {
        let temp = ''

        for (let item of list) {
            temp += `
                <div class="item">
                    <div class="content">
                        <h3 class="title">
                            <a href="ContactAdd.html">${item.name}</a>
                        </h3>
                    </div>

                    <div class="operation">
                        <button class="btn btn-primary" onclick="Edit(${item.id})">编辑</button>
                        <button class="btn btn-danger" onclick="Del(${item.id})">删除</button>
                    </div>
                </div>
            `
        }

        $('#cardList .list').append(temp)
    }
    function Edit(typeid) {
        location.href = 'TypeEdit.html?typeid=' + typeid;
    }

    function Del(typeid) {
        mui.confirm('确认删除该分类',
            '删除',
            ['取消', '确认'],
            async function (res) {
                if (res.index === 1) {
                    let result = await POST({
                        url: 'card/type/del',
                        params: {
                            businessid: business.id ? business.id : 0,
                            typeid
                        }
                    });

                    if (result.code === 1) {
                        mui.toast(result.msg);

                        setTimeout(() => {
                            DownCallback();
                        }, 1500)
                    } else {
                        mui.toast(result.msg);
                    }
                }
            }
        )
    }
</script>
</html>